import DynamicWallMaterialProperty from '../../lib/WallMaterialProperty'
export default {
    data() {
        return {
            trailImage: require('@/assets/map/jianban.png'),
            lineImage: require('@/assets/map/line.png')
        }
    },
    computed: {
        basin() {
            return this.$store.getters.basin
        },
        level() {
            return this.$store.getters.level
        },

    },
    watch: {
        basin: {
            handler: function (name) {
                this.$nextTick(() => {
                    this.creatWXQ(name)
                })
            },
            immediate: true
        },
        level: {
            immediate: true,
            handler: function (val, oldVal) {

                if (val > 301 && oldVal < 301) {
                    this.creatWXQ();
                }
                if (oldVal > 301 && val < 301) {
                    this.creatWXQ();
                }
                console.log(oldVal);
                console.log(val);
            }
        },
    },
    created() {
        this._entitiesWXQ = []
        this.entitiesWXQ = []
    },
    methods: {
        creatWXQ(name) {
            this.clearWXQ()
            if (this.layerList2[1].children.WXQ.show) {
                var url = `${mapConfig.resUrlPre}/geojson/${this.basin}/WXQ.json`

                this.$axios.get(url).then(res => {
                    var rows = res.data.features
                    rows.forEach(row => {
                        // if (feature.geometry.type === 'MultiPolygon') return
                        var multiPolygon = row.geometry.coordinates // 一行里的多个多形n)
                        if (multiPolygon.length > 1) {
                            multiPolygon.forEach(polygon => {
                                var coordinates = polygon[0] // 每个多边形的坐标
                                var lonlats = []
                                // var lonlat2 = []
                                coordinates.forEach(item => {
                                    var p = Cesium.Cartographic.fromDegrees(item[0], item[1])
                                    // lonlat2.push(item[0])
                                    // lonlat2.push(item[1])
                                    lonlats.push(p)
                                })
                                if (this.level > 300) {
                                    this.drawWXQPint(lonlats)
                                } else {
                                    this.drawWXQBack(lonlats)
                                }

                            })
                        } else {
                            var lonlats = []
                            var _lonlats = multiPolygon[0][0]
                            multiPolygon[0].forEach(item => {
                                var p = Cesium.Cartographic.fromDegrees(item[0], item[1])
                                lonlats.push(p)
                            })
                            if (this.level > 300) {
                                this.drawWXQPint(_lonlats)
                            } else {
                                this.drawWXQBack(lonlats)
                            }

                        }
                    })
                })
            } else {
                this.clearWXQ()
            }
        },
        drawWXQPint(lonlats) {
            var entity = {
                eventName: 'WXQ',
                lid: 'WXQ',
                prop: 'item.properties',
                position: Cesium.Cartesian3.fromDegrees(
                    lonlats[0],
                    lonlats[1]
                ),
                billboard: {
                    image: this.layerList2[1].children.WXQ.icon,
                    horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
                    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, this.$config.mapConfig.pb_far),
                    width: this.$config.mapConfig.billboardSize,
                    height: this.$config.mapConfig.billboardSize
                }
            }
            this._entitiesWXQ.push(this.$viewer.entities.add(entity))
        },
        drawWXQBack(lonlats) {
            if (this.$viewer.scene.terrainProvider) {
                var promise = Cesium.sampleTerrainMostDetailed(this.$viewer.scene.terrainProvider, lonlats)
                promise.then(updatedPositions => {
                    var radians = []
                    var minimumHeights = []
                    var maximumHeights = []
                    updatedPositions.forEach(item => {
                        radians.push(item.longitude)
                        radians.push(item.latitude)
                        radians.push(item.height)
                        minimumHeights.push(item.height)
                        maximumHeights.push(item.height + 20)
                    })
                    var cars = Cesium.Cartesian3.fromRadiansArrayHeights(radians)
                    var wallEntity = {
                        wall: {
                            positions: cars,
                            minimumHeights: minimumHeights,
                            maximumHeights: maximumHeights,
                            // outline: true,
                            // outlineColor: Cesium.Color.RED,
                            material: new Cesium.DynamicWallMaterialProperty({
                                trailImage: this.trailImage,
                                lineImage: this.lineImage,
                                color: Cesium.Color.RED,
                                duration: 2500
                            })
                        }
                    }
                    var polyEntity = {
                        polygon: {
                            hierarchy: cars,
                            perPositionHeight: true,
                            material: Cesium.Color.RED.withAlpha(0.5)
                        }
                    }
                    this._entitiesWXQ.push(this.$viewer.entities.add(wallEntity))
                    this._entitiesWXQ.push(this.$viewer.entities.add(polyEntity))
                })
            }
        },
        drawWXQ(lonlats) {
            var radians = []
            lonlats.forEach(item => {
                radians.push(item.longitude)
                radians.push(item.latitude)
            })
            function StripeMaterialProperty(color, duration, repeat) {
                this._definitionChanged = new Cesium.Event()
            }

            Object.defineProperties(StripeMaterialProperty.prototype, {
                isConstant: {
                    get: function () {
                        return false
                    }
                },
                definitionChanged: {
                    get: function () {
                        return this._definitionChanged
                    }
                }
            })
            StripeMaterialProperty.prototype.getType = function (time) {
                return 'Stripe'
            }
            StripeMaterialProperty.prototype.getValue = function (time, result) {
                if (!Cesium.defined(result)) {
                    result = {}
                }
                return result
            }
            StripeMaterialProperty.prototype.equals = function (other) {
                return this === other || other instanceof StripeMaterialProperty
            }
            Cesium.StripeMaterialProperty = StripeMaterialProperty

            Cesium.Material._materialCache.addMaterial('Stripe', {
                fabric: {
                    type: 'Stripe',
                    uniforms: {},
                    source: `


                    czm_material czm_getMaterial(czm_materialInput materialInput)
                    {
                        czm_material material = czm_getDefaultMaterial(materialInput);

                        if(sin((gl_FragCoord.x + -gl_FragCoord.y) / 2.)>0.9){
                            material.diffuse = vec3(1.,0.,0.); 
                        }else{
                            material.alpha = 0.; 
                        }
                        return material;
                    }`
                },
                translucent: function (material) {
                    return true
                }
            })
            var cars = Cesium.Cartesian3.fromRadiansArray(radians)
            var polyEntity = {
                polyline: {
                    positions: cars,
                    width: 2,
                    material: Cesium.Color.RED.withAlpha(0.5),
                    clampToGround: true,
                    classificationType: Cesium.ClassificationType.BOTH // BOTH  or TERRAIN
                },
                polygon: {
                    hierarchy: cars,
                    // perPositionHeight: true,
                    // material: Cesium.Color.RED.withAlpha(0.5),
                    material: new Cesium.StripeMaterialProperty(),
                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND
                }
            }
            this._entitiesWXQ.push(this.$viewer.entities.add(polyEntity))
        },

        clearWXQ() {
            if (this._entitiesWXQ && this._entitiesWXQ.length > 0) {
                this._entitiesWXQ.forEach(item => {
                    this.$viewer.entities.remove(item)
                })
                this._entitiesWXQ = []
            }
        }
    }
}
